<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="block">
            <view class="flex-row block-row">
                <view class="flex-grow-1">
                    收货人：{{data.order.name}}
                </view>
                <view class="flex-grow-0">
                    {{data.order.mobile}}
                </view>
            </view>
            <view>下单时间：{{data.order.addtime}}</view>
        </view>
        <view class="block">
            <view class="flex-row block-row">
                <view class="flex-grow-1">商品总额</view>
                <view class="flex-grow-0" v-if="data.order">￥{{data.order.goods_total_price}}</view>
                <view class="flex-grow-0" v-else>￥0.00</view>
            </view>
            <view class="flex-row block-row">
                <view class="flex-grow-1">商品数量</view>
                <view class="flex-grow-0">×{{data.order.num}}</view>
            </view>
            <view class="flex-row block-row">
                <view class="flex-grow-1">优惠券优惠</view>
                <view class="flex-grow-0">-￥{{data.order.coupon_sub_price}}</view>
            </view>
            <view class="flex-row block-row">
                <view class="flex-grow-1">运费</view>
                <view class="flex-grow-0">￥{{data.order.express_price}}</view>
            </view>
            <view class="flex-row block-row">
                <view class="flex-grow-1">买家留言</view>
                <view class="flex-grow-0">{{data.order.content}}</view>
            </view>
            <view class="block-footer">合计：
                <text style="color: #ff4544">￥{{data.order.pay_price}}</text>
            </view>
        </view>
        <view class="block" style="margin-bottom:200upx;">
            <view class="flex-row goods-item" v-for="(item,index) in data.order.goods_list" :key="index">
                <view class="flex-grow-0">
                    <image mode="aspectFill" :src="item.goods_pic" style="width: 156upx;height: 156upx"></image>
                </view>
                <view class="flex-grow-1" style="padding-left: 20upx">
                    <view style="margin-bottom: 10upx">
                        {{item.name}}
                    </view>
                    <view class="flex-row">
                        <view class="flex-grow-1">
                            <view style="font-size: 9pt;color: #888;margin-right: 20upx;display: inline-block" v-for="(items,i) in item.attr" :key="i">
                                {{items.attr_group_name}}：{{items.attr_name}}
                            </view>
                        </view>
                        <view class="flex-grow-0" style="text-align: right">
                            <view>×{{items.num}}</view>
                            <view style="color: #ff4544">￥：{{items.total_price}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view @tap="clerk" class="block flex-x-center" style="position:fixed;width:100%;bottom:-20upx">
            <view class="flex-y-center flex-x-center" style="width:100%;padding:10upx 0;background:#ff4544;color:#fff;border-radius:10upx;height:100upx;">核销订单</view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        order: null,
        getGoodsTotalPrice: function() {
            return this.data.order.total_price;
        }
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var t = this, o = "";
        if ("undefined" == typeof my) o = e.scene; else if (null !== myVue.getApp.query) {
            var r = myVue.getApp.query;
            myVue.getApp.query = null, o = r.order_no;
        }
        t.setData({
            dapp: myVue.getApp.core.getStorageSync(myVue.getApp.const.DAPP),
            user_info: myVue.getApp.getUser()
        }), myVue.getApp.core.showLoading({
            title: "正在加载"
        }), myVue.getApp.request({
            url: myVue.getApp.api.order.clerk_detail,
            data: {
                order_no: o
            },
            success: function(e) {
                0 == e.code ? t.setData({
                    order: e.data
                }) : t.getApp.core.showModal({
                    title: "警告！",
                    showCancel: !1,
                    content: e.msg,
                    confirmText: "确认",
                    success: function(e) {
                        e.confirm && t.getApp.core.redirectTo({
                            url: "/pages/index/index"
                        });
                    }
                });
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
		methods: {
			clerk: function(e) {
        var t = this;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "是否确认核销？",
            success: function(e) {
                e.confirm && (myVue.getApp.core.showLoading({
                    title: "正在加载"
                }), myVue.getApp.request({
                    url: myVue.getApp.api.order.clerk,
                    data: {
                        order_no: t.data.order.order_no
                    },
                    success: function(e) {
                        0 == e.code ? t.getApp.core.redirectTo({
                            url: "/pages/user/user"
                        }) : t.getApp.core.showModal({
                            title: "警告！",
                            showCancel: !1,
                            content: e.msg,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && t.getApp.core.redirectTo({
                                    url: "/pages/index/index"
                                });
                            }
                        });
                    },
                    complete: function() {
                        t.getApp.core.hideLoading();
                    }
                }));
            }
        });
    }
		},
	}
</script>

<style scoped>
page {
    overflow-x: hidden;
}

.status-bar {
    box-sizing: border-box;
    padding: 0 88upx;
    color: #fff;
    font-size: 13pt;
    height: 120upx;
    line-height: 120upx;
    position: relative;
}

.status-bar image {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.block {
    background: #fff;
    padding: 32upx 24upx;
    margin-bottom: 20upx;
}

.block .block-row {
    margin-bottom: 10upx;
}

.block .block-footer {
    border-top: 1upx solid #eee;
    margin-left: -24upx;
    margin-right: -24upx;
    padding: 24upx;
    padding-bottom: 0;
    margin-top: 32upx;
    text-align: right;
    font-weight: bold;
}

.goods-item {
    border-bottom: 1upx solid #E3E3E3;
    padding-bottom: 32upx;
    margin-bottom: 32upx;
}

.goods-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.refund-btn {
    float: right;
    height: 60upx;
    border: 1upx solid #bbb;
    padding: 0 30upx;
    border-radius: 10upx;
    margin-top: 20upx;
}

.refund-text {
    float: right;
    display: inline-block;
    margin-top: 20upx;
}
</style>
